<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple calendar example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      ul {
        padding-left: 0;
      }

      li {
        display: block;
        float: left;
        width: 25%;
        border: 2px solid white;
        padding: 5px;
        height: 80px;
        background-color: #4A2DB6;
        color: white;
      }
    </style>
  </head>
  <body>
    <label for="month">Select month: </label>
    <select id="month">
      <option value="January">January</option>
      <option value="February">February</option>
      <option value="March">March</option>
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
      <option value="October">October</option>
      <option value="November">November</option>
      <option value="December">December</option>
    </select>

    <h1></h1>

    <ul>

    </ul>

    <script>
      const select = document.querySelector("select");
      const list = document.querySelector("ul");
      const h1 = document.querySelector("h1");

      select.addEventListener("change", () => {
        const choice = select.value;
        createCalendar(choice);
      });

      function createCalendar(month) {
        let days = 31;

        if (month === "February") {
          days = 28;
        } else if (
          month === "April" ||
          month === "June" ||
          month === "September" ||
          month === "November"
        ) {
          days = 30;
        }

        list.textContent = "";
        h1.textContent = month;
        for (let i = 1; i <= days; i++) {
          const listItem = document.createElement("li");
          listItem.textContent = i;
          list.appendChild(listItem);
        }
      }

      select.value = "January";
      createCalendar("January");
    </script>
  </body>
</html>
